import React, { Component } from 'react';
import { Row, Table, Col, Button, Input, DatePicker, Form, Spin  } from 'antd';
import EchartPage from '../report/EchartPage';
import * as Utils from '../../../common/utils';
import moment from 'moment';
require('../sysinfo/sysinfo.css')
require('../../systemManager/customer.css');

const FormItem = Form.Item;
const dateFormat = 'YYYY-MM-DD';
const monthFormat = 'YYYY-MM';
const currentDate = new Date();
const { MonthPicker } = DatePicker;

class CommonDaySum extends Component{
    constructor(props) {
        super(props);
        this.state = {
        };
    }

    componentWillMount() {
        this.props.getChartData({queryDate: currentDate});
    }

    //汇总查询方法
    handleSumSubmit = (e) =>{
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, values) => {
            this.props.getChartData(values);
        });
    }

    //导出方法
    outPutFunc = () =>{
        const { _headers, _data, fileName, yData } = this.props;
        const maxData = Math.max(...yData);
        Utils.outPutExcel(_headers, _data, fileName, maxData);
    }

    //禁止时间
    disabledDate = (current) =>{
        // can not select days before today and today
        return current && current.valueOf() > Date.now();
    }

    validateSn = (rule, value, callback) =>{
        if(Utils.CheckSnFunc(value)){
            callback('序列号存在非法字符,请重新输入');
            return ;
        }
        callback();
        return;
    }

    validateVersion = (rule, value, callback) =>{
        if(Utils.CheckSnFunc(value)){
            callback('版本号存在非法字符,请重新输入');
            return ;
        }
        callback();
        return;
    }

    render(){
        const { columns, data, loading, xData, yData, xName, yName, title, legendData, formatter, flag } = this.props;
        const { getFieldDecorator } = this.props.form;
        let msoState = yName.indexOf("MSO")<0

        const formItemLayout = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 7 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 17 },
            },
        };

        return(
            <div style={{height: '100%'}}>
            <Spin spinning={loading} >
                <Row>
                    <Form onSubmit={this.handleSumSubmit}>
                        <Col span={19}>
                            {msoState&&<Row>
                                <Col span={8}>
                                    <FormItem
                                        {...formItemLayout}
                                        label="通道号"
                                    >
                                        {getFieldDecorator('distNum')(
                                            <Input maxLength={255}/>
                                        )}
                                    </FormItem>
                                </Col>
                                <Col span={8}>
                                    <FormItem
                                        {...formItemLayout}
                                        label="版本号"
                                    >
                                        {getFieldDecorator('version',{
                                            rules: [{
                                                validator: this.validateVersion
                                            }],
                                        })(
                                            <Input maxLength={250}/>
                                        )}
                                    </FormItem>
                                </Col>
                                <Col span={8}>
                                    <FormItem
                                        {...formItemLayout}
                                        label="序列号"
                                    >
                                        {getFieldDecorator('sn',{
                                            rules: [{
                                                validator: this.validateSn
                                            }],
                                        })(
                                            <Input maxLength={250}/>
                                        )}
                                    </FormItem>
                                </Col>
                            </Row>}
                            <Row>
                                {flag=='month'?<Col span={8}>
                                    <FormItem
                                        {...formItemLayout}
                                        label="时间"
                                    >
                                        {getFieldDecorator('queryMonth', {
                                            initialValue: moment(currentDate, monthFormat)
                                        })(
                                            <MonthPicker
                                                disabledDate={this.disabledDate}
                                                style={{ width: '100%' }}
                                                format={monthFormat}
                                                allowClear={false}
                                            />
                                        )}
                                    </FormItem>
                                </Col>:<Col span={8}>
                                    <FormItem
                                        {...formItemLayout}
                                        label="时间"
                                    >
                                        {getFieldDecorator('queryDate', {
                                            initialValue: moment( currentDate, dateFormat)
                                        })(
                                            <DatePicker 
                                                disabledDate={this.disabledDate}
                                                style={{ width: '100%'}}
                                                format={dateFormat}
                                                placeholder="请选择日期"
                                                allowClear = {false}
                                                locale={{
                                                    "lang": {
                                                        today: '今天',
                                                        yearFormat: "YYYY年",
                                                        monthSelect: "选择月份",
                                                        yearSelect: "选择年份",
                                                    }
                                                }}
                                            />
                                        )}
                                    </FormItem>
                                </Col>}
                                <Col span={2} offset={1} className='statistic-button-margin'>
                                    <FormItem>
                                        <Button type="primary" htmlType="submit" >查询</Button>
                                    </FormItem>
                                </Col>
                            </Row>
                        </Col>
                    </Form>
                    <Col span={4}/>
                </Row>
                <Row>
                    <Col span={19} style={{ paddingTop: 30 }}>
                        <EchartPage 
                            title={title}
                            xName={xName}
                            yName={yName}
                            xData={xData} 
                            yData={yData}
                            legendData={legendData}
                            formatter={formatter}
                        />
                    </Col>
                    <Col span={5} style={{ paddingRight: '1.7%'}}>
                        <Row type="flex" justify="end" className='output-button'>
                            <Button size='large' style={{ fontSize: 14}} onClick={()=>this.outPutFunc()}>导出列表</Button>
                        </Row>
                        <Table
                            className='output-table'
                            dataSource={data}
                            loading={loading}
                            columns={columns}
                            scroll={{ y: 600 }}
                            pagination={false}
                        />
                    </Col>
                </Row>
                </Spin>
            </div>
        )
    }
}

export default Form.create()(CommonDaySum)